<template>
	<w-layout showNavbar navTitle="完善信息" navTitleColor="#fff" :navBackgroundColor="publicStyles['--color']">
		<template #default>
			<view class="container">
				<view class="mt-60 fs-46">
					完善信息
				</view>
				<view class="fr-ac-jc mt-100">
					<image style="width: 180rpx;height: 180rpx;border-radius: 50%;" src="../../static/logo.png"
						mode="widthFix"></image>
				</view>

				<view class="mt-100 fr-ac px-20 pb-30" style="border-bottom: 1px solid #eee;">
					<view class="mr-80">
						头像
					</view>
					<view class="flex-1">
						<!-- #ifdef MP-WEIXIN -->
						<button class="fr-ac" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image style="width: 60rpx;height: 60rpx;" class="avatar ml-auto" :src="avatar" v-if="avatar != ''" />
							<up-icon v-if="avatar" name="arrow-right" class="ml-20" size="20" color="#999"></up-icon>
							<up-icon v-else name="arrow-right" class="ml-auto" size="20" color="#999"></up-icon>
						</button>
						<!-- #endif -->
					</view>
				</view>
				
				<view class="mt-50 fr-ac px-20 pb-30" style="border-bottom: 1px solid #eee;">
					<view class="mr-80">
						昵称
					</view>
					<view class="flex-1">
						<input class="br-10 t-r"  type="nickname" placeholder="请输入昵称~" @blur="blurNickName" maxlength="50" v-model="nickname" />
					</view>
				</view>
				
				<up-button @click="getImproveApi" text="确定" class="login-btn mt-80"></up-button>
				<up-button v-if="showSkip" @click="skip" text="跳过" class="login-btn mt-30"></up-button>
				
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	// 引入配置
	import config from '@/common/config'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		getImprove
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad((options) => {
		if(userStore.user_info.avatar){
			avatar.value = userStore.user_info.avatar
		}
		if(userStore.user_info.nickname){
			nickname.value = userStore.user_info.nickname
		}
		if(options.showSkip){
			showSkip.value = options.showSkip
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	const avatar = ref('')
	const nickname = ref('')
	const showSkip = ref(false)
	
	const onChooseAvatar = (e) => {
		uploadImage(e.detail.avatarUrl);
	}
	// 上传图片
	const uploadImage = async (url) => {
		uni.showLoading({
			title: '图片上传中...'
		})
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: config.baseUrl+"/api/common/upload",
				filePath: url,
				name: "file",
				header: {
					token: userStore.user_info.token
				},
				success: res => {
					res = JSON.parse(res.data);
					avatar.value = res.data.fullurl;
					resolve(res.data.fullurl);
				},
				fail: res => {
					uni.hideLoading();
					avatar.value = '';
					console.log(res,'图片上传失败！');
				},
				complete: e => {
					uni.hideLoading();
				}
			});
		}).catch(e => {
			console.log(e);
		});
	}
	const blurNickName = (e)=> {
		if (e.detail.value) nickname.value = e.detail.value;
	}


	const getPhoneNumber = async (e) => {
		console.log(e, '手机号授权参数')
		const {
			code,
			encryptedData,
			iv,
		} = e.detail

		// #ifdef MP-WEIXIN || APP
		uni.login({
			provider: 'weixin',
			success: async function(loginRes) {
				console.log(loginRes, '微信授权参数');
				const res = await getLogin({
					code: loginRes.code, //使用微信授权的code
					// code, // 使用手机号授权的code
					encryptedData,
					iv,
				})
				userStore.user_info = res.userinfo
				if (res.type == 1) {
					//注册
					uni.navigateTo({
						url: '/pages/login/improve'
					})
				} else {
					//登录
					appStore.redirectTo()
				}
			}
		});
		// #endif


	}

	const getImproveApi = async () => {
		if(!avatar.value){
			return uni.$u.toast('请选择头像')
		}
		if(!nickname.value){
			return uni.$u.toast('请输入昵称')
		}
		const res= await getImprove({
			nickname:nickname.value || '',
			avatar:avatar.value || '',
		})
		userStore.user_info.avatar = avatar.value
		userStore.user_info.nickname = nickname.value
		appStore.redirectTo()
		
	}
	const skip = ()=>{
		appStore.redirectTo()
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}

	.color {
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 30rpx 50rpx;

	}
	
	
	button {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 14px;
		color: #fff;
		padding: 0px;
		margin: 0px;
		background-color: transparent;
	}
	
	// 去掉烦人的边框
	button::after {
		border: 0; // 或者 border: none;
	}
	
	// 调整禁用时的样式
	button[disabled] {
		background-color: #fff;
		color: #eee;
	}
	

	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>